<template>
  <div>
    <button @click="countStore.increment">count++</button>
    <p>{{ countStore.count }}</p>
    <el-button type="primary" :icon="Search">搜索</el-button>
    <el-switch v-model="value" size="large" active-text="Open" inactive-text="Close" />
    <div class="mb-4">
      <el-button>默认</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>

    <el-pagination background layout="prev, pager, next" :total="1000" />

    <div class="flex gap-2">
      <el-tag type="primary">Tag 1</el-tag>
      <el-tag type="success">Tag 2</el-tag>
      <el-tag type="info">Tag 3</el-tag>
      <el-tag type="warning">Tag 4</el-tag>
      <el-tag type="danger">Tag 5</el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
const countStore = useCounterStore()

const value = ref(true)
</script>

<style></style>
